import React, { useState, memo, useEffect, useMemo } from 'react';

function Columntext({ style, content }) {
    let replacecontent = useMemo(() => {
        let str = content.replace(/{{/g, `<div class="tag">`).replace(/}}/g, `<span class="close"></span></div>`);
        return str
    }, [content])
    return (
        <div style={{ ...style, position: "absolute" }}>
            <p style={{ margin: 0, width: "100%", height: "100%", fontFamily: style.fontFamily, writingMode: "vertical-lr",whiteSpace:"pre-wrap" }} dangerouslySetInnerHTML={{ '__html': replacecontent }}>
            </p>
        </div>
    );
}



export default memo(Columntext);